/**
 * @description 登录
 * @author Xiaohui Zeng
 * @version 2021/4/20
 * @Email: eggadmin2021.136.com
 * @WeChat: badiweier
 */
<template>
  <div class="flex login-page">
    <div class="flexC top">
      <div class="flexC content">
        <div class="flexR header">
          <div class="flexR img">
            <img src="@/assets/logo.png" alt="">
          </div>
          <div class="flexC name">
            <p>{{ setting.logoTitle }}</p>
            <p>企业级通用后台管理模板系统</p>
          </div>
        </div>
        <el-form ref="refForm" :model="ruleForm" :rules="rules" label-width="0px" class="loginForm" size="default">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="账号">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <user />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" show-password placeholder="密码">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="flexR more">
              <div class="flexR">
                <el-checkbox v-model="checked">
                  记住我
                </el-checkbox>
              </div>
              <span class="flexR pointer">忘记密码？</span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%" type="primary" round @click="submitForm()">
              登录
            </el-button>
          </el-form-item>
          <el-form-item>
            <div class="flexR moreLogin">
              <div class="flexR">
                <span>其它登录方式</span>
                <svg-icon name="other-wechat" />
                <svg-icon name="other-qq" />
                <svg-icon name="other-weibo" />
              </div>
              <span class="flexR pointer">立即注册</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <copyright class="copyright" />
  </div>
</template>

<script>
  import { reactive, ref } from 'vue'
  import { useStore } from 'vuex'
  import { useRouter } from 'vue-router'
  import setting from '@/setting'
  import copyright from '@/layouts/base-layout/copyright/index.vue'
  import layoutStyle from '@/styles/layout/base-layout/layout.module.scss'
  export default {
    name: 'login',
    components: { copyright },
    setup() {
      const refForm = ref(null)
      const ruleForm = reactive({
        username: 'admin',
        password: '123456'
      })
      const rules = reactive({
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      })
      // 状态
      const store = useStore()
      const router = useRouter()
      // 登录
      function submitForm() {
        refForm.value.validate(async(valid) => {
          if (valid) {
            await store.dispatch('user/login', ruleForm)
            router.push({
              path: `/${setting.indexPage}`
            })
          }
        })
      }
      function resetFields() {
        ruleForm.username = ''
        ruleForm.password = ''
      }
      const checked = ref(true)
      return {
        ruleForm,
        rules,
        refForm,
        setting,
        submitForm,
        resetFields,
        checked,
        layoutStyle
      }
    }
  }
</script>

<style scoped lang="scss">
.login-page{
  position: relative;
  flex-direction: row;
  width: 100vw;
  min-height: 100vh;
  color: #fff;
  background: rgb(0, 61, 75) url("../img/bg.jpeg") no-repeat;
  background-size: cover;

  .top{
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    .content{
      padding: 20px;
      width: 380px;
      justify-content: center;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.06);
      .header{
        margin-bottom: 10px;
        justify-content: center;
        .name{
          p:first-child{
            font-size: 1.5rem;
          }
          p:last-child{
            font-weight: 400;
            font-size: 0.8rem;
          }
        }
        .img{
          width: 50px;
          margin-right: 20px;
        }
      }

      .loginForm{
        margin-top: 10px;
        width: 100%;
        :deep(.el-form-item){
          margin-bottom: 30px;
        }
        :deep(.el-input){
          height: 40px;
          line-height: 40px;
          &>.el-input__inner{
            height: inherit;
            line-height: inherit;
            border-radius: 10px;
            padding-left: 35px;
            background-color: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.6);
            color: #fff;
            font-size: 15px;
          }
          font-size: 17px;
          .el-input__clear{
            font-size: 17px;
          }
          ::placeholder {
           font-size: 14px;
          }
        }
        .more{
          justify-content: space-between;
          width: 100%;
        }
        .moreLogin{
          justify-content: space-between;
          width: 100%;
          &>div{
            flex-grow: 1;
            .svg-icon{
              font-size: 20px;
              margin-left: 16px;
            }
          }
        }
      }
    }
  }
  .copyright{
    position: absolute;
    bottom: 0;
    left: 0;
    :deep( span), :deep(span)>a{
      color: rgba(255,255,255,0.7);
    }
  }
  // 小于768
  @media (max-width: 768px) {
    .top{
      padding: 30px 0 0 0;
      .content{
        width: 90%;
        max-width: 380px;
      }
    }
  }
  // 大于992
  @media (min-width: 992px) {
    .top{
      padding: 96px 0px;
      .content{
        width: 380px;
      }
    }
  }
}
</style>
